<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        placeholder="计划名称"
        v-model="listQuery.planName"
        class="filter-item"
        style="width:200px"
      ></el-input>
      <el-date-picker
        v-model="listQuery.startDate"
        type="date"
        placeholder="计划开始时间"
        value-format="yyyy/MM/dd"
        class="filter-item"
        style="width:150px"
      ></el-date-picker>
      <el-date-picker
        v-model="listQuery.overDate"
        type="date"
        value-format="yyyy/MM/dd"
        placeholder="计划完成时间"
        class="filter-item"
        style="width:150px"
      ></el-date-picker>
      <el-select
        v-model="companyVal"
        placeholder="被检查企业"
        class="filter-item"
        style="width:130px"
        clearable
      >
        <el-option
          v-for="(item,index) in ddlCompany"
          :key="index"
          :label="item.text"
          :value="item.value"
          :selected="item.selected"
        ></el-option>
      </el-select>
      <el-select
        v-model="planStateVal"
        placeholder="计划状态"
        style="width:130px;"
        class="filter-item"
        clearable
      >
        <el-option
          v-for="(item,index) in ddlPlanState"
          :key="index"
          :selected="item.selected"
          :label="item.text"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="queryList" class="filter-item">查询</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column min-width="200px" align="center" label="计划名称">
        <template slot-scope="{row}">
          <span>{{ row.planName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="检查目标" min-width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.targetName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="计划状态" min-width="100">
        <template slot-scope="scope">
          <span>{{scope.row.planStateName}}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="开始时间" min-width="150" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.startDate }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="结束时间" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.overDate }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="实际开始时间" min-width="150" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.realStartDate}}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="实际结束时间" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.realOverDate }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200" fixed="right">
        <template slot-scope="scope">
          <router-link :to="'/danger/plan/look/'+scope.row.id">
            <el-button type="info" size="small" icon="el-icon-view">查看</el-button>
          </router-link>
          <el-button
            type="warning"
            size="small"
            v-if="scope.row.planState == 2"
            @click="suspend(scope.row.id)"
            icon="el-icon-video-pause"
          >中止</el-button>
          <router-link :to="'/danger/plan/edit/'+scope.row.id">
            <el-button
              type="primary"
              size="small"
              v-if="scope.row.planState == 1"
              icon="el-icon-edit"
            >编辑</el-button>
          </router-link>
          <el-button
            type="success"
            icon="el-icon-check"
            size="small"
            @click="publish(scope.row.id)"
            v-if="scope.row.planState == 1"
          >发布</el-button>
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            v-if="scope.row.planState == 1"
            @click="delPlan(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="radioVisible" title="发布检查计划提示">
      <el-checkbox-group v-model="check" @change="checkPush">
        <el-checkbox v-for="push in checkList" :label="push" :key="push">{{push}}</el-checkbox>
      </el-checkbox-group>
      <!-- <el-radio-group v-model="radio">
        <el-radio :label="1">向任务负责人推送消息</el-radio>
        <el-radio :label="2">向企业安全负责人推送消息</el-radio>
        <el-radio :label="3">向上级领导推送消息</el-radio>
      </el-radio-group>-->
      <div style="text-align:right;margin-top:10px">
        <el-button type="danger" @click="radioVisible=false">取消</el-button>
        <el-button type="primary" @click="radioRelease">确定</el-button>
      </div>
    </el-dialog>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.pageIndex"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  fetchList,
  deletePlan,
  publishCheckPlan,
  fetchCancel
} from '@/api/checkplan'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'TaskList',
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      radioVisible: false,
      check: ['向任务负责人推送消息'],
      checkList: [
        '向任务负责人推送消息',
        '向企业安全负责人推送消息',
        '向上级领导推送消息'
      ],
      roleId: '',
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageIndex: 1, //查询页码
        companyId: 0, //检查企业
        // executorId: this.$store.getters.userId, //检查负责人
        executorId: 0, //检查负责人
        limit: 10, //单页记录数
        overDate: '', //计划结束时间
        startDate: '', //计划开始时间
        targetId: 0, //检查对象
        planName: '', //计划名称
        planState: 0
      },
      query: {
        planName: '', //计划名称
        beginTime: '', //开始时间
        overTime: '' //完成时间npm
      },
      ddlExecutor: [], //执行人
      executorVal: 0,
      ddlCompany: [], //公司
      companyVal: '',
      planStateVal: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //获取列表
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then((response) => {
        let dataList = response.data.list
        this.list = dataList
        this.ddlExecutor = response.data.ddlExecutor //检查人
        this.ddlCompany = response.data.ddlCompany //检查人
        this.total = response.data.total //response.data.total
        this.listLoading = false
        this.ddlPlanState = response.data.ddlPlanState
      })
    },
    // 中止
    suspend(id) {
      this.$confirm('此操作将中止计划, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          //发请求删除计划
          fetchCancel(id).then((res) => {
            if (res.data) {
              //删除成功，重新加载数据
              this.getList()
              this.$message({
                type: 'success',
                message: '中止成功!'
              })
            } else {
              this.$message({
                type: 'success',
                message: '中止失败!'
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消中止'
          })
        })
    },
    //删除
    delPlan(id) {
      // console.log(id)
      this.$confirm('此操作将永久删除计划, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          //发请求删除计划
          deletePlan({ id }).then((res) => {
            if (res.data) {
              //删除成功，重新加载数据
              this.getList()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            } else {
              this.$message({
                type: 'success',
                message: '删除失败!'
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    //发布
    publish(id) {
      this.roleId = id
      this.radioVisible = true
    },
    //发布——改增
    radioRelease(value) {
      console.log(this.check)
      let isPushExecute = false
      let isPushCompany = false
      let isPushLeader = false
      if (this.check.length > 0) {
        for (let i = 0; i < this.check.length; i++) {
          if (this.check[i] == '向任务负责人推送消息') {
            isPushExecute = true
          } else if (this.check[i] == '向企业安全负责人推送消息') {
            isPushCompany = true
          } else if (this.check[i] == '向上级领导推送消息') {
            isPushLeader = true
          }
        }
      } else {
        isPushExecute = false
        isPushCompany = false
        isPushLeader = false
      }
      console.log(this.check, isPushExecute, isPushCompany, isPushLeader)
      let parse = {
        id: this.roleId,
        isPushExecute: isPushExecute,
        isPushCompany: isPushCompany,
        isPushLeader: isPushLeader
      }
      console.log(parse)

      publishCheckPlan(parse)
        .then((res) => {
          console.log(res)
          if (res.code == 20000) {
            //发布成功，重新加载数据
            this.getList()
            this.$message({
              type: 'success',
              message: '发布成功!'
            })
            this.radioVisible = false
          } else {
            this.$message({
              type: 'warn',
              message: '发布失败!'
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消发布'
          })
        })
    },
    queryList() {
      //   return alert(this.companyVal)
      if (this.companyVal) {
        this.listQuery.companyId = this.companyVal
      }
      // this.listQuery.companyId = this.companyVal
      this.listQuery.executorId = this.executorVal
      if (this.planStateVal) {
        this.listQuery.planState = this.planStateVal
      }
      //   return console.log(this.executorVal)
      this.getList()
    }
  }
}
</script>

<style scoped  lang="scss" >
@import '~@/styles/mixin.scss';
/deep/ .el-button + .el-button {
  margin-left: 0 !important;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.pagination-container {
  padding: 0;
}
.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}
</style>
